<template>
  <div style="border: solid 20px rgb(245, 247, 249)">
    <Button
      style="color: aliceblue; margin: 20px"
      icon="ivu-icon ivu-icon-md-add"
      type="primary"
      @click="modal = true"
      >新增</Button
    >
    <Table border :columns="columns" :data="banners" style="margin: 10px">
      <template #name="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template #action="{ index }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
          >修改</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
  </div>
  <div>
    <Modal
      v-model="modal"
      title="新增管理员"
      :loading="loading"
      @on-ok="asyncOK(true)"
      class="inp1"
    >
      分类名称:<Input
        v-model="this.bannerss.title"
        placeholder="分类名称"
        style="width: 400px; margin: 10px"
      />
      分类排序:<Input
        v-model="this.bannerss.sort"
        placeholder="排序"
        style="width: 400px; margin: 10px"
      />
      <!-- <RadioGroup v-model="">
      <Radio label="1"></Radio>
      <Radio label="0"></Radio>
    </RadioGroup> -->
      <Ipload @getUrl="zz"></Ipload>
    </Modal>
  </div>
</template>
<script>
import Ipload from "../../components/Upload.vue";
import { list, add, del } from "../../Api/rol.js";
export default {
  components: { Ipload },
  created() {
    this.qq();
  },
  data() {
    return {
      modal: false,
      columns: [
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "显示",
          key: "status",
        },
        {
          title: "分类图",
          key: "url",
          width: 200,
          render: (h, params) => {
            return h("img", {
              src: params.row.url,
              style: {
                width: "170px",
                height: "200px",
              },
            });
          },
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      banners: [],
      bannerss: {
        title: "",
        url: "",
        sort: "",
        path: "",
        desciption: "",
        status: "",
      },
    };
  },
  methods: {
    // 封装
    qq() {
      list().then((res) => {
        this.banners = res.data.data;
      });
    },
    asyncOK() {
      add({
        titl: this.bannerss.title,
        url: this.bannerss.url,
        sort: this.bannerss.sort,
        path: this.bannerss.path,
        desciption: this.bannerss.desciption,
        status: this.bannerss.status,
      }).then((res) => {
        console.log(res.data.errCode == 0);
        if (res.data.errCode == 0) {
          this.$Notice.success({
            title: "添加成功",
            // desc: nodesc ? "管理员用户添加成功" : "",
          });
          this.qq();
        }
      });
      this.qq();
    },
    remove(index) {
      console.log(this.banners[index]._id);
      del({ _id: this.banners[index]._id }).then((res) => {
        console.log(res);
      });
      this.banners.splice(index, 1);
    },
    zz(i) {
    console.log(i);
    this.bannerss.url = i;
    //   this.dates.length
  },
  },
};
</script>